<template>
  <div class="titleContainer">
    <div class="head_left">
      <div class="setting_box" v-if="!isRoam" @click="settingClick()"></div>
      <div class="back_box" @click="settingBack()"></div>
      <div class="warn_box" @click="$emit('desImp')"></div>
      <div class="monitor_nav" v-if="!onlyTools">
        <div class="monitorSelectContainer">
          <el-select v-model="monitorActiveName" placeholder="请选择" :popper-append-to-body="false"
            @change="selectTypeChange">
            <el-option v-for="(item, index) of monitorOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

      </div>

    </div>
    <div class="head_right">
      <div class="item  item_1" style="margin-right: 10px;">{{ systemTime1 }}</div>
      <div class="item  item_2" style="margin-right: 10px;">{{ systemTime3 }}</div>
      <div class="item  item_3" style="margin-right: 20px;">{{ systemTime2 }}</div>
      <div class="item">天气：</div>
      <!--       天气图标缺失         -->
      <!--                <div class="item"><span class="icon"></span></div>-->
      <div class="item" style="margin-right: 20px;">{{ weatherInfo.wea }}</div>
      <div class="item">气温：{{
        weatherInfo.tem_day
      }}°~{{
  weatherInfo.tem_night
}}°
      </div>
    </div>
    <!--      模型管理-->
    <transition name="opacityFade">
      <div class="tool_options tp5" v-show="showSecSetting && toolActive == 2">
        <div v-for="(item, index) in modelOptions" :key="index" @click.stop="modelClick(item, index)"
          :class="item.status ? 'active title boxSize flex' : 'title boxSize flex'">
          <div class="tool_icon"><img :src="item.icon_1" alt=""></div>
          <div class="txt">{{ item.label }}</div>
        </div>
      </div>
    </transition>
    <transition name="opacityFade">
      <div class="tool_options tp6" v-show="showSecSetting && toolActive == 3">
        <div v-for="(item, index) in thematicOptions" :key="index" @click.stop="thematicClick(item, index)"
          :class="item.status ? 'active title boxSize flex' : 'title boxSize flex'">
          <div class="tool_icon" :style="index == 3 ? 'opacity:0' : 'opacity:1'"><img
              :src="item.status ? require('@/assets/zfx_s.png') : require('@/assets/zfx.png')" alt="">
          </div>
          <div class="txt">{{ item.label }}</div>
        </div>
      </div>
    </transition>
    <!--      传感器-->
    <transition name="opacityFade">
      <div class="tool_options tp7"
        v-show="showThrSetting && showSecSetting && toolActive == 3 && thematicOptions[1].status">
        <div v-for="(item, index) in sensorOptions" :key="index" @click.stop="sensorClick(item, index)"
          :class="item.status ? 'active title boxSize flex' : 'title boxSize flex'">
          <div class="tool_icon"><img :src="item.status ? require('@/assets/zfx_s.png') : require('@/assets/zfx.png')"
              alt=""></div>
          <div class="txt">{{ item.label }}</div>
        </div>
      </div>
    </transition>
    <!--      监控分布弹窗-->
    <transition name="opacityFade">
      <div class="tool_options tp8"
        v-show="showThrSetting && showSecSetting && toolActive == 3 && thematicOptions[2].status">
        <div v-for="(item, index) in controlOptions" :key="index" @click.stop="controlClick(item, index)"
          :class="item.status ? 'active title boxSize flex' : 'title boxSize flex'">
          <div class="tool_icon"><img :src="item.status ? require('@/assets/zfx_s.png') : require('@/assets/zfx.png')"
              alt=""></div>
          <div class="txt">{{ item.label }}</div>
        </div>
      </div>
    </transition>
    <!--      漫游列表-->
    <transition name="opacityFade">
      <div class="tool_options tp4" v-show="showSecSetting && toolActive == 1">
        <div v-for="(item, index) in roamOptions" :key="index" @click.stop="roamClick(item, index)"
          :class="item.status ? 'active title boxSize flex' : 'title boxSize flex'">
          <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
            <div class="inlineSpan" :style="item.status ? 'color:#00E6FF' : 'color:#ffffff'">{{ item.label }}
            </div>
          </el-tooltip>
        </div>
      </div>
    </transition>
    <!--      漫游公司的漫游路径-->
    <transition name="opacityFade">
      <div class="tool_options tp9" v-show="showThrSetting && showSecSetting && toolActive == 1">
        <div class="boxSize flex title boldT">
          <div class="txt">添加</div>
          <!--          <div class="tool_icon"><img src="@/assets/tj.png" alt=""></div>-->

          <div class="addRomaC">
            <div class="addRomaC_replace"></div>
            <input ref="fileInput" type="file" id="filePath" accept=".mp4,.wmv,.avi,.dat,.mkv,.flv,.mov,. rmvb"
              class="addRomaC_Btn" @change="importVideo" />
          </div>

        </div>
        <div v-for="(item, index) in roamLineData[slectRoamPos]" :key="index" @click.stop="romaLineClick(item, index)"
          :class="item.status ? 'active title boxSize flex' : 'title boxSize flex'">
          <div class="txt">{{ item.label }}</div>
          <div class="tool_icon ml5" @click="delDialog = true"><img src="@/assets/sc.png" alt=""></div>
        </div>
      </div>
    </transition>
    <!--      模型分类-->
    <transition name="opacityFade">
      <div class="tool_options tp10"
        v-show="showThrSetting && showSecSetting && toolActive == 2 && modelOptions[0].status">
        <div v-for="(item, index) in systemModelOptions" :key="index" @click.stop="systemModelClick(item, index)"
          :class="item.status ? 'active title boxSize flex fitem' : 'title boxSize flex fitem'">
          <div class="title-line">
            <div class='txt'>{{ item.label }}</div>
          </div>
        </div>
      </div>
    </transition>

    <!-- <transition name="opacityFade">
      <div class="tool_options tp10"
        v-show="showThrSetting && showSecSetting && toolActive == 2 && modelOptions[1].status && modelOptions[0].status">
        <div v-for="(item, index) in toolOptions10" :key="index" @click.stop="toolOptionsClick10(item)"
          :class="(toolActive10 === item.value ? 'active title boxSize flex fitem' : 'title boxSize flex fitem')">
          <div class="title-line">
            <div class='txt'>{{ item.label }}</div>
            <div class="tool_icon ml5" @click="item.exp = !item.exp"><img src="@/assets/xl.png" alt=""></div>
          </div>
          <div v-if="item.exp && item.child.length && toolActive10 === item.value">
            <div v-for="(item, index) in item.child" :key="index" @click.stop="toolChildActive10 = item.value"
              :class="(toolChildActive10 === item.value ? 'active title boxSize flex' : 'title boxSize flex')">
              <div class='txt'>{{ item.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </transition> -->
    <transition name="opacityFade">
      <div class="del-box" v-show="delDialog">
        <div class="tt">删除确认</div>
        <div class="bb">
          <span @click="delDialog = false">取消</span>
          <span>|</span>
          <span @click="delDialog = false">确认</span>
        </div>
      </div>
    </transition>
    <!--    日照分析-->
    <transition name="opacityFade">
      <div class="sunshineView" v-show="showSunshineView">
        <span class="sunshineView-title">日照分析</span>
        <span class="sunshineView-line"></span>
        <div class="sunshineView-close" @click="changeShowSunshineView"></div>
        <span class="sunshineView-des">提示:模拟设定时间范围内的太阳光照效果。</span>
        <div class="sunshineView-slider">
          <span class="sunshineView-slider-des">时间选择：</span>
          <div class="sunshineView-slider-c">
            <el-slider v-model="sunshineValue" :step="1" :max="23" show-stops @change="sunshineChange">
            </el-slider>
          </div>
        </div>
        <div class="sunshineView-condition">
          <span class="sunshineView-condition-des">当前时间：</span>
          <span class="sunshineView-condition-result">{{ sunshineValue }}时</span>
        </div>
      </div>
    </transition>
    <!--    模型详情-->
    <transition name="opacityFade">
      <div class="modelDetailsView" v-show="showModelDetailsView">
        <span class="modelDetailsView-title">模型详情</span>
        <span class="modelDetailsView-line"></span>
        <div class="modelDetailsView-close" @click="changeModelDetailsView(false)"></div>
        <el-scrollbar class="modelDetailsView-desC scroll-container">
          <div style="display: flex;flex-direction: column">
            <span class="modelDetailsView-des">经度：{{ this.showModelDetailsValue.longitude }}</span>
            <span class="modelDetailsView-des">纬度：{{ this.showModelDetailsValue.latitude }}</span>
            <span class="modelDetailsView-des">占地面积:{{ this.showModelDetailsValue.floorSpace }}</span>
            <span class="modelDetailsView-des">材质:{{ this.showModelDetailsValue.texture }}</span>
            <span class="modelDetailsView-des">结构布局:{{ this.showModelDetailsValue.layout }}</span>
            <span class="modelDetailsView-des">说明:{{ this.showModelDetailsValue.description }}</span>
          </div>
        </el-scrollbar>


      </div>
    </transition>

    <!--    设置弹窗界面-->
    <div style="di¬splay: flex;flex-direction: row" v-show="showSettingPanel && !isRoam">
      <transition name="opacityFade">
        <div class="settingC" v-if="showSettingPanel">
          <div class="settingC_roam" v-if="mapMode === '3D'">
            <div class="settingC_title1" style="cursor: pointer">
              <span>空间分析</span>
            </div>
            <el-scrollbar class="settingC_thematic_C scroll-container">
              <div class="settingC_thematic_C_item" style="cursor: pointer;" @click="changeShowSunshineView">
                <div class="settingC_thematic_C_item_icon"
                  :style="{ 'background-image': `url(${require('@/assets/icon_rizhao.png')})` }"></div>
                <span class="settingC_thematic_C_item_name">日照分析
                </span>
              </div>
              <div class="settingC_thematic_C_item" style="cursor: pointer;" @click="changeShowRoma()">
                <div class="settingC_thematic_C_item_icon"
                  :style="{ 'background-image': `url(${require('@/assets/jk.png')})` }"></div>
                <span class="settingC_thematic_C_item_name">漫游管理
                </span>
              </div>
              <div class="settingC_thematic_C_item" style="cursor: pointer;" @click="heatMapClick">
                <div :class="`settingC_thematic_C_item_icon ${hotMapStatus ? 'active' : 'un_check'}`"
                  :style="{ 'background-image': `url(${require('@/assets/icon_rizhao.png')})` }"></div>
                <span class="settingC_thematic_C_item_name">热力图
                </span>
              </div>
            </el-scrollbar>
          </div>

          <div class="settingC_model" v-if="mapMode === '3D'">
            <div class="settingC_title1">
              <span>模型管理</span>
            </div>
            <div style="display: flex;flex-direction: row">
              <div class="settingC_model_type" :style="item.status ? 'backgroundColor:rgba(0, 230, 255, 0.3)' : ''"
                v-for="(item, index) in modelOptions" :key="index" @click="modelClick(item, index)">
                {{ item.label }}
              </div>
            </div>
            <el-scrollbar class="settingC_model_C scroll-container" v-show="modelOptions[0].status">
              <el-collapse class="collapse-margin">
                <div v-for="(item, index) in netModelData" :key="index">
                  <el-collapse-item>
                    <template slot="title">
                      <div class="settingC_thematic_C_item">
                        <div class="settingC_thematic_C_item_icon"></div>
                        <div class="settingC_thematic_C_item_name">{{ item.locationsName }}</div>
                      </div>
                    </template>
                    <div class="settingC_thematic_C_item" v-for="(cItem, cIndex) in item.children" :key="cIndex"
                      @click="netModelClick(cItem, cIndex)">
                      <div class="settingC_thematic_C_item_iconc  "></div>
                      <div class="settingC_thematic_C_item_name" :style="{ color: cItem.status ? '#62B7FF' : '#D8E8EC' }">
                        {{ cItem.modelName }}
                      </div>
                    </div>
                  </el-collapse-item>
                </div>
              </el-collapse>
            </el-scrollbar>
            <!-- <el-scrollbar class="settingC_model_C scroll-container" v-show="modelOptions[1].status">
              <div class="settingC_model_C_name" :style="item.status ? 'color:#00E6FF' : 'color:#D8E8EC'"
                v-for="(item, index) in systemModelOptions" :key="index" @click="systemModelClick(item, index)">
                {{ item.label }}
              </div>
            </el-scrollbar>
            <div class="settingC_model-import" @click="sendImportModelMsg">导入模型</div> -->
          </div>


          <div class="settingC_thematic" v-if="mapMode === '3D'">
            <div class="settingC_title1">
              <span>专题图生成</span>
            </div>
            <el-scrollbar class="settingC_thematic_C scroll-container">
              <div v-for="(item, index) in thematicOptions" :key="index">
                <div class="settingC_thematic_C_item">
                  <!-- <div class="settingC_thematic_C_item_icon"
                    :style="{ 'background-image': index == 0 ? '' : item.status ? `url(${require('@/assets/zfx_s.png')})` : `url(${require('@/assets/zfx.png')})` }"
                    @click.stop="thematicClick(item, index, false)"></div> -->
                  <div class="settingC_thematic_C_item_name" @click="thematicClick(item, index, true)">{{
                    item.label
                  }}
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <!--          <div class="settingC_roam" v-if="mapMode === '3D'">-->
          <!--            <div class="settingC_title1">-->
          <!--              <span>漫游管理</span>-->
          <!--            </div>-->
          <!--            <el-scrollbar class="settingC_roam_C scroll-container">-->
          <!--              <div class="settingC_roam_C_name" :style="item.status ? 'color:#00E6FF' : 'color:#D8E8EC'"-->
          <!--                   v-for="(item,index) in roamOptions" :key="index"-->
          <!--                   @click="roamClick(item,index)">-->
          <!--                {{ item.label }}-->
          <!--              </div>-->
          <!--            </el-scrollbar>-->
          <!--          </div>-->
        </div>
      </transition>
      <transition name="opacityFade">
        <div class="roamOptions" v-show="showRoamView">
          <div class="boxSize flex title boldT">
            <div class="txt">添加</div>
            <!--          <div class="tool_icon"><img src="@/assets/tj.png" alt=""></div>-->
            <div class="addRomaC">
              <div class="addRomaC_replace"></div>
              <input style="background-color: #FF5035" ref="fileInput" type="file" id="filePath"
                accept=".mp4,.wmv,.avi,.dat,.mkv,.flv,.mov,. rmvb" class="addRomaC_Btn" @change="importVideo" />
            </div>

          </div>
          <div v-for="(item, index) in roamLineData[slectRoamPos]" :key="index" @click.stop="romaLineClick(item, index)"
            :class="item.status ? 'active title boxSize flex' : 'title boxSize flex'">
            <div class="txt">{{ item.label }}</div>
            <div class="tool_icon ml5" @click="delDialog = true"><img src="@/assets/sc.png" alt=""></div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import axios from "axios";
import { getWeek, transforDate } from "@/utils/dateUtils";
import {
  sendAreaDeviceMsg,
  sendDistributionMsg,
  sendEditModeMsg,
  sendEquipment0Msg,
  sendEquipment1Msg,
  sendImportModelMsg,
  sendMonitorMsg, sendQueryModelEndMsg, sendQueryModelMsg,
  sendRomaMsg,
  sendSceneEditingMsg,
  sendscreenshotMsg,
  sendSensorMsg,
  sendSunShineValueMsg,
  sendToUeMsg
} from "@/utils/UeMessageUtils";

import ScreenShort from "js-web-screen-shot";
import {
  getDeviceTypes, //获取设备分类信息
  getDeviceData, getDevicePlayUrl, getListEnterprise, getSituationalHeatMap
} from "@/api/area";
import { Value } from "sass";
// 标题栏

export default {
  name: "monitorIndex",
  props: {
    // showSetting: Boolean,//是否展示左工具栏
    panelValue: [String, Boolean],
    onlyTools: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      hotMapStatus: 0,//热力图显示隐藏 0 隐藏 1 显示
      hotMapList: [], //
      screenWidth: 0,//屏幕宽度
      screenHeight: 0,//屏幕高度
      intervalTime: 0,
      intervalTimer: 0,
      isRoam: false,//是否正在漫游
      systemInterval: '',//时间刷新
      systemTime1: '',//系统时间
      systemTime2: '',//系统时间
      systemTime3: '',//周期
      weatherInfo: '',//天气
      delDialog: false,
      showSettingPanel: false,
      showRoamView: false,//显示漫游界面
      showSunshineView: false,//显示日照设置界面
      showModelDetailsView: false,//显示日照设置界面
      showModelDetailsValue: false,//显示模型详情数据
      showSecSetting: false,//显示二级设置
      showThrSetting: false,//显示三级设置
      toolActive: 0,
      toolOptions: [
        { value: 1, label: '漫游管理', icon_1: require('@/assets/jk.png') },
        { value: 2, label: '模型管理', icon_1: require('@/assets/sxt.png') },
        { value: 3, label: '专题图生成', icon_1: require('@/assets/tp.png') },
        { value: 4, label: '操作说明', icon_1: require('@/assets/tp.png') },
      ],
      //漫游数据
      slectRoamPos: -1,//当前选择的漫游公司
      romaLineFlag: '',// 当前漫游标识
      roamOptions: [
        { status: false, label: '新矿内蒙古能源有限责任公司洗煤分公司', flag: 'xk' },
        { status: false, label: '内蒙古恒坤化工有限公司', flag: 'hkhg' },
        { status: false, label: '内蒙古义川业碳材科技有限公司', flag: 'ycxt' },
        { status: false, label: '内蒙古宏利达煤焦精细化工有限公司', flag: 'hld' },
        { status: false, label: '内蒙古上海庙鄂西物流有限责任公司', flag: 'exwl' },
        { status: false, label: '鄂托克前旗时达绿能天然气有限责任公司', flag: 'sdln' },
        { status: false, label: '鄂尔多斯市海川能源科技有限公司', flag: 'hcny' },
        { status: false, label: '内蒙古森泰天然气有限公司', flag: 'st' },
        { status: false, label: '内蒙古雅海能源开发有限责任公司', flag: 'yh' },
        { status: false, label: '鄂尔多斯市鑫祥能源再生有限责任公司', flag: 'xxny' },
      ],
      //模型管理
      modelOptions: [
        { status: true, label: '系统模型', icon_1: require('@/assets/jk.png') },
        // { status: false, label: '内置模型', icon_1: require('@/assets/sxt.png') },
      ],
      netModelData: '',//服务器模型数据
      //系统模型数据
      systemModelOptions: [
        { status: false, label: '树木' }, { status: false, label: '灌木' },
        { status: false, label: '枪机监控' }, { status: false, label: '球机监控' },
        { status: false, label: '核酸检测点' }, { status: false, label: '路灯' },
        { status: false, label: '应急红绿灯' }, { status: false, label: '人物1' },
        { status: false, label: '人物2' }, { status: false, label: '人物3' },
        { status: false, label: '单行道路标' }, { status: false, label: '禁停路标' },
        { status: false, label: '停车场路标' }, { status: false, label: '人行道路标' },
        { status: false, label: '限速路标' }, { status: false, label: '路障' },
        { status: false, label: '垃圾桶' }, { status: false, label: '烟雾报警器' },
        { status: false, label: '红外报警器' },
        { status: false, label: '空气探测器' },
        // {status: false, label: '箭头'},
        // {status: false, label: '线段'},
      ],
      //专题图生成
      thematicOptions: [
        { status: false, label: '生成专题图', },
        { status: false, label: '企业分布', },
        { status: false, label: '风险区域', },
      ],
      //温度传感器
      sensorOptions: [
        { status: false, label: '气体', flag: 'qt', num: 0 },
        { status: false, label: '温度', flag: 'wd', num: 0 },
        { status: false, label: '湿度', flag: 'sd', num: 0 },
        { status: false, label: '烟雾', flag: 'yw', num: 0 },
        { status: false, label: '用电', flag: 'yd', num: 0 },
        { status: false, label: '压力', flag: 'yl', num: 0 },
        { status: false, label: '噪音', flag: 'zy', num: 0 },
      ],
      //监控
      controlOptions: [
        { status: false, label: '高清监控', flag: 'gq', num: 0 },
        { status: false, label: '高点监控', flag: 'gd', num: 0 },
        { status: false, label: '鹰眼监控', flag: 'yy', num: 0 },
        { status: false, label: '卡口监控', flag: 'kk', num: 0 },
        { status: false, label: '排污监控', flag: 'pw', num: 0 },
      ],

      toolActive9: 0,
      //漫游路线数据
      roamLineData: [],
      toolActive10: 0,
      toolChildActive10: 0,
      toolOptions10: [
        {
          value: 0, label: '模型分类', icon_1: require('@/assets/xl.png'), exp: true, child: [
            { value: 1, label: '模型分类1', parent: 1, icon_1: require('@/assets/xl.png') },
            { value: 2, label: '模型分类1', parent: 1, icon_1: require('@/assets/xl.png') },]
        },
        {
          value: 0,
          exp: false,
          child: [
            { value: 1, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png') },
            { value: 2, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png') },
            { value: 3, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png') },
            { value: 4, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png') },],
          label: '模型分类2',
          icon_1: require('@/assets/xl.png')
        },
        {
          value: 0,
          exp: false,
          child: [
            { value: 1, label: '模型分类3', parent: 1, icon_1: require('@/assets/xl.png') },
            { value: 2, label: '模型分类3', parent: 1, icon_1: require('@/assets/xl.png') },
            { value: 3, label: '模型分类3', parent: 1, icon_1: require('@/assets/xl.png') },],
          label: '排污监控模型分类3',
          icon_1: require('@/assets/xl.png')
        },
      ],

      monitorNavShow: false,
      monitorActiveName: 'monitorEnvironment',
      monitorOptions: [
        { value: 'monitorEnvironment', label: '综合态势监测' },
        { value: 'monitorAir', label: '大气监测' },
        { value: 'monitorContaminated', label: '污染源监测' },
      ],
      deviceCodeConf: {
                101: 'rcx', //熱成像
                102: 'yy', //鹰眼监控摄像机
                107: 'dlgq', //"道路高清摄像机"
                108: 'lscs', //"雷视测速预警一体机"
                110: 'gq', //高清摄像机
            },
      sunshineValue: 0,//日照选择数据
      sunshineMarks: {//日照配置数据
        0: '0',
        1: '1',
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        6: '6',
        7: '7',
        8: '8',
        9: '9',
        10: '10',
        11: '11',
        12: '12',
        13: '13',
        14: '14',
        15: '15',
        16: '16',
        17: '17',
        18: '18',
        19: '19',
        20: '20',
        21: '21',
        22: '22',
        23: '23',
      }
    }
  },
  components: {},
  computed: {
    ...mapGetters({
      showPane: 'setting/getPane',
    }),
    ...mapState(['mapMode']),
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.getWidghtWidth()
    });
    this.getWidghtWidth()
    this.getListEnterprise()
    this.getLocalRoamData()
    this.getSystemTime()
    this.startInterval()
    this.getWeatherInfo()
    this.getSituationalHeatMap()
    // init deviceTypes
    this.start()

  },
  beforeDestroy() {
    clearInterval(this.systemInterval);
  },
  watch: {
    panelValue() {
      //点击图层等中间按钮
      this.showSettingPanel = false
      this.showSunshineView = false
      this.showModelDetailsView = false
      this.$emit('selectParkImp', false)
      //重置漫游
      this.resetRoam()
      //重置模型
      this.resetModel()
      //重置专题图
      this.resetThematic(false)
    },
    showSettingPanel() {

    },
    showSecSetting() {

    },
    showThrSetting(nV) {
      if (!nV) {
        // sendEditModeMsg(0)
        // sendMonitorMsg(0)
        // sendSensorMsg(0)
      }
    },

  },
  methods: {
    ...mapActions({
      setInfo: 'setting/setInfo',
    }),
    ...mapActions({
      setRoam: 'setting/setRoam',
    }),
    getWidghtWidth() {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
    },
    async start() {
      await this.getDeviceTypeList(); //调用获取设备分类列表接口
      await this.getDeviceList();
    },
    // 调用获取设备分类列表接口
    async getDeviceTypeList() {
      const res = await getDeviceTypes();
      // console.log('调用获取设备分类列表接口', res.data.data)
      if (res && res.data && res.data.data) {
        let newTyps = res.data.data.map(item => {

          return {
            ...item,
            label: item.dictValue,
            flag: item.dictKey,
            status: false,
            children: [...item.children.map(child => {
              child.label = child.dictValue;
              child.status = false;
              if (!child.children) child.children = []
              return child
            })],
          }
        })
        this.thematicOptions.push(...newTyps)
        // console.log('调用获取设备分类列表接口', this.thematicOptions)
      }
    },
    // 调用获取设备列表接口
    async getDeviceList() {
      const res = await getDeviceData();
      // console.log('调用获取设备列表接口', res.data.data)
      if (res && res.data && res.data.data) {
        res.data.data.map(item => {
          this.thematicOptions.forEach((cItem, index) => {
            (cItem.children || []).forEach((childItem) => {
              if (childItem.dictKey === item.deviceType) {
                // console.log('1可用设备', item)
                childItem.children.push({
                  ...item,
                  label: item.deviceName,
                  flag: item.id
                })
              }
            });
          })
        })
        // console.log('处理完设备分类列表数据', this.thematicOptions)
      }
    },
    //重置选择的类型
    resetSelectType() {
      this.monitorActiveName = 'monitorEnvironment'
    },
    //导入本地视频
    importVideo: function (e) {
      const files = e.target.files
      var file = document.getElementById('filePath').files[0];
      this.roamLineData[this.slectRoamPos].push({ label: file.name })
      this.setLocalRoamData()
      // this.$refs.videoDom.src = "@/assets/media/1.mp4";
      this.$refs.fileInput.value = null
    },
    //获取本地漫游数据
    getLocalRoamData() {
      var data = JSON.parse(localStorage.getItem("roamData"));
      if (data) {
        this.roamLineData = this.dealData.cloneDeep(data)
      } else {
        this.roamOptions.forEach(item => {
          var vItem = [{ label: '漫游路线1' }]
          this.roamLineData.push(vItem)
        })
        this.setLocalRoamData()
      }
    },
    setLocalRoamData() {
      localStorage.setItem("roamData", JSON.stringify(this.roamLineData));
    },
    startInterval() {
      this.systemInterval = setInterval(this.getSystemTime, 500);
    },
    //获取系统时间
    getSystemTime() {
      var dates = new Date().getTime()
      this.systemTime1 = transforDate(dates, 'yyyy年MM月dd日')
      this.systemTime2 = transforDate(dates, 'hh:mm:ss')
      this.systemTime3 = getWeek(dates)
    },
    //获取天气
    getWeatherInfo() {
      let _this = this
      axios.post('https://www.yiketianqi.com/free/day?appid=92296648&appsecret=GE7RMKrR&unescape=1').then(function (res) {
        _this.weatherInfo = res.data
        // if( _this.weatherInfo &&  _this.weatherInfo.date && _this.weatherInfo.date === '2023-03-15'){
        //   _this.$emit("closeAll")
        // }
        var weather = ''
        if (_this.weatherInfo && _this.weatherInfo.wea) {

          if (_this.weatherInfo.wea.indexOf("晴天") !== -1) {
            weather = 0
          }
          if (_this.weatherInfo.wea.indexOf("少云") !== -1) {
            weather = 1
          }
          if (_this.weatherInfo.wea.indexOf("多云") !== -1) {
            weather = 2
          }
          if (_this.weatherInfo.wea.indexOf("乌云密布") !== -1) {
            weather = 3
          }
          if (_this.weatherInfo.wea.indexOf("雾") !== -1) {
            weather = 4
          }
          if (_this.weatherInfo.wea.indexOf("小雨") !== -1) {
            weather = 5
          }
          if (_this.weatherInfo.wea.indexOf("中雨") !== -1) {
            weather = 6
          }
          if (_this.weatherInfo.wea.indexOf("雷暴雨") !== -1) {
            weather = 7
          }
          if (_this.weatherInfo.wea.indexOf("小雪") !== -1) {
            weather = 8
          }
          if (_this.weatherInfo.wea.indexOf("中雪") !== -1) {
            weather = 9
          }
          if (_this.weatherInfo.wea.indexOf("暴雪") !== -1) {
            weather = 10
          }
          let descriptor = {
            season: weather
          }
          window.emitUIInteraction(descriptor);
        }
      }).catch(function (error) {
      });
    },
    //获取服务器模型
    getListEnterprise() {
      var _this = this
      getListEnterprise().then(res => {
        if (res && res.data && res.data.data) {
          _this.netModelData = this.dealData.cloneDeep(res.data.data)
          _this.netModelData.forEach(item => {
            item.status = false
            if (item.children) {
              item.children.forEach(cItem => {
                cItem.status = false
              })
            }
          })
        }
      })
    },
    //获取热力图数据
    async getSituationalHeatMap() {
      const res = await getSituationalHeatMap();
      console.log('获取热力图数据', res)
      if (res?.data?.data) {
        this.hotMapList = (res?.data?.data?.situational || []).map(item => {
          // sendToUeMsg({
          //   long: item.longitude,
          //   lat: item.latitude,
          //   type: 'hotMap',
          //   initEquipment: 1,
          // })
          return { lng: item.longitude, lat: item.latitude, level: item.level }
        });
      }
    },
    //获取搜索结果
    getSearchData() {
      var params = {
        'id': '1620332310006153218',
        'streamType': 1
      }
      getDevicePlayUrl(params).then((res) => {
      })
    },
    //给UE4发送经纬度
    sendLongitudeAndLatitude(item) {
      // console.log('给UE4发送经纬度', item)
      try {
        let dealData = {}
        if (item.id) {
          dealData.id = item.id
        }
        if (item.longitude) {
          dealData.long = item.longitude
        }
        if (item.latitude) {
          dealData.lat = item.latitude
        }
        if (item.flag) {
          dealData.type = item.flag
        }

        // if (item.deviceTypeName.search('气体') !== -1) {
        //   dealData.type = 'qt'
        //   this.sensorOptions[0].num += 1
        // }
        // if (item.deviceTypeName.search('温度') !== -1) {
        //   dealData.type = 'wd'
        //   this.sensorOptions[1].num += 1
        // }
        // if (item.deviceTypeName.search('湿度') !== -1) {
        //   dealData.type = 'sd'
        //   this.sensorOptions[2].num += 1
        // }
        // if (item.deviceTypeName.search('烟雾') !== -1) {
        //   dealData.type = 'yw'
        //   this.sensorOptions[3].num += 1
        // }
        // if (item.deviceTypeName.search('用电') !== -1) {
        //   dealData.type = 'yd'
        //   this.sensorOptions[4].num += 1
        // }
        // if (item.deviceTypeName.search('压力') !== -1) {
        //   dealData.type = 'yl'
        //   this.sensorOptions[5].num += 1
        // }
        // if (item.deviceTypeName.search('噪音') !== -1) {
        //   dealData.type = 'zy'
        //   this.sensorOptions[6].num += 1
        // }
        // if (item.deviceTypeName.search('高清监控') !== -1) {
        //   dealData.type = 'gq'
        //   this.controlOptions[0].num += 1
        // }
        // if (item.deviceTypeName.search('高点监控') !== -1) {
        //   dealData.type = 'gd'
        //   this.controlOptions[1].num += 1
        // }
        // if (item.deviceTypeName.search('鹰眼监控') !== -1) {
        //   dealData.type = 'yy'
        //   this.controlOptions[2].num += 1
        // }
        // if (item.deviceTypeName.search('卡口监控') !== -1) {
        //   dealData.type = 'kk'
        //   this.controlOptions[3].num += 1
        // }
        // if (item.deviceTypeName.search('排污监控') !== -1) {
        //   dealData.type = 'pw'
        //   this.controlOptions[4].num += 1
        // }
        dealData.initEquipment = 1
        // window.emitUIInteraction(dealData);
      } catch (e) {
      }
    },
    settingClick() {
      this.showSettingPanel = !this.showSettingPanel
      if (!this.showSettingPanel) {
        //重置漫游
        this.resetRoam()
        //重置模型
        this.resetModel()
        //重置专题图
        this.resetThematic(false)
        this.showSunshineView = false
        this.showModelDetailsView = false
      } else {
        this.getSituationalHeatMap()
        this.setInfo(false)
        this.$emit('settingClickImp', false)
      }
    },
    settingBack() {
      this.showSunshineView = !this.showSunshineView
      //如果是漫游中
      if (this.isRoam) {
        this.isRoam = false
        this.romaLineFlag = ''
        sendRomaMsg(0)
        this.$emit('romaClickImp', false)
        this.setRoam(false)
        return
      }
      sendRomaMsg(0)
      this.toolActive = 0
      this.roamOptions.forEach(item => {
        item.status = false
      })
      // this.modelOptions.forEach(item => {
      //   item.status = false
      // })
      this.thematicOptions.forEach(item => {
        item.status = false
      })
      this.sensorOptions.forEach(item => {
        item.status = false
      })
      this.controlOptions.forEach(item => {
        item.status = false
      })
      this.toolActive9 = 0
      this.toolActive10 = 0
      this.toolOptions10.forEach(item => {
        item.value = 0
      })
      this.showSettingPanel = false
      this.setInfo(true)
      this.$emit('settingClickImp', true)
      this.$emit('selectParkImp', 0)
    },
    toolOptionsClick(obj) {
      if (obj.value == 4) {
        this.$emit('desImp')
        return
      }
      if (this.toolActive !== obj.value) {
        this.toolActive = obj.value
        this.showSecSetting = true
      } else this.showSecSetting = !this.showSecSetting

    },
    toolOptionsClick2(obj) {
      if (this.toolActive2 !== obj.value) {
        this.toolActive2 = obj.value
        this.showSecSetting = true
      } else this.showThrSetting = !this.showThrSetting
    },
    toolOptionsClick3(obj) {
      if (this.toolActive3 !== obj.value) {
        this.toolActive3 = obj.value
        this.showSecSetting = true
      } else this.showThrSetting = !this.showThrSetting
    },
    // 公司漫游列表
    roamClick(value, index) {
      this.resetThematic(true)
      this.resetModel()
      this.slectRoamPos = index
      this.roamOptions.forEach(item => {
        if (item != value) {
          item.status = false
        }
      })
      value.status = !value.status
      this.showRoamView = value.status == true ? true : false
      // if (value.status) {
      //   this.showThrSetting = true
      // } else this.showThrSetting = false

    },
    //模型点击事件
    modelClick(value, index) {
      this.resetRoam()
      this.resetThematic(true)
      // this.modelOptions.forEach(item => {
      //   if (item != value) {
      //     item.status = false
      //   }
      // })
      // value.status = true
      // if (index == 1) {
      //   this.systemModelOptions.forEach(item => {
      //     item.status = false
      //   })
      // }

      value.status = true

      if (index == 0) {
        this.modelOptions[1].status = false
      }
      if (index == 1) {
        this.modelOptions[0].status = false
      }
      if (value.status) {
        sendEditModeMsg(1)
        this.showThrSetting = true
      } else {
        this.showThrSetting = false
      }
    },
    //系统模型点击事件
    systemModelClick(value, index) {
      this.resetRoam()
      this.resetThematic(true)
      this.systemModelOptions.forEach(item => {
        if (item != value) {
          item.status = false
        }
      })
      value.status = !value.status
      if (value.status) {
        sendEditModeMsg(1)
        setTimeout(function () {
          sendSceneEditingMsg(index + 1)
        }, 1000
        )

      } else {
        sendEditModeMsg(0)
      }

    },
    /**
     * 根据图片生成画布
     */
    convertImageToCanvas(image) {
      var canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      canvas.getContext('2d').drawImage(image, 0, 0)
      return canvas
    },
    /**
     * 生成图片
     * 截图确认按钮回调函数
     */
    callback(base64data) {
      let _this = this
      var image = new Image()
      image.src = base64data
      image.onload = () => {
        var canvas = _this.convertImageToCanvas(image)
        var url = canvas.toDataURL('image/jpeg')
        // 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加
        _this.downloadFile(url)
        _this.uploadlist.push({ image: url })
        for (var i = 0; i < _this.uploadlist.length; i++) {
          if (_this.uploadlist.length >= 6) {
            _this.uploadhide = false
          }
        }
        this.$message({
          type: 'success',
          message: '截图成功',
        })
      }
    },
    //下载截图
    downloadFile(capture) {
      const saveInfo = {
        //导出文件格式自己定义，我这里用的是时间作为文件名
        download: '截图' + new Date() + `.png`,
        href: capture,
      }
      const element = document.createElement('a')
      element.style.display = 'none'
      for (const key in saveInfo) {
        element.setAttribute(key, saveInfo[key])
      }
      document.body.appendChild(element)
      element.click()
      setTimeout(() => {
        document.body.removeChild(element)
      }, 300)
    },
    closeFn() {
    },
    //专题图生成点击监听
    thematicClick(value, index, type) {

      this.resetRoam()
      this.resetModel()

      // var time = new Date().getTime()
      // 专题图生成 --截图
      if (index == 0) {
        // if (time - this.intervalTime > 3 * 1000) {
        //   this.intervalTime = time
        //   this.$message.success('专题图已保存到/NM_SHM_UE5/Saved/Screenshots/Windows目录下')
        //   sendscreenshotMsg(1)
        // }
        return new ScreenShort({
          enableWebRtc: false,  //是否显示选项框
          level: 2000,  //层级级别
          canvasWidth: this.screenWidth, canvasHeight: this.screenHeight,
          completeCallback: this.callback,
          closeCallback: this.closeFn,
        });
      }

      value.status = !value.status
      //企业分布 --
      if (index == 1) {
        sendDistributionMsg(value.status ? 1 : 0)
        this.$emit('selectParkImp', value.status, 0)
        return
      }
      // 风险区域
      if (index == 2) {
        if (value.status) {
          sendToUeMsg({ fxqy: 1 })
        } else {
          sendToUeMsg({ fxqy: 0 })
        }
        return
      }
      console.log('是否是点击标题', value)
      //是否是点击标题 --- 非 专题图生成 和 企业分布
      if (type && index > 1) {
        // 这里通知 ue 显示分类下所有设备 或者 --单个通知所有设备显示
        this.thematicOptions.forEach((item, i) => {
          if (index === i) {
            item.children.map(child => {
              if (value.status) {
                sendToUeMsg({ showDeviceType: this.getDeviceCustomType(child) })
              } else {
                sendToUeMsg({ hideDeviceType: this.getDeviceCustomType(child) })
              }
              // child.children.map(device => sendEquipment1Msg(device.id))
            })
          } 
          // else {
          //   (item.children || []).map(child => {
          //     child.children.map(device => sendEquipment0Msg(device.id))
          //   })
          // }
        })
        this.$emit('selectParkImp', value.status, 1, value)
        return;
      }
      return;
    },
    // 获取设备type  如果有自定义的 使用自定义
    getDeviceCustomType(item) {
        console.log('获取设备type', item)
        return this.deviceCodeConf[item.deviceType || item.dictKey] || (item.deviceType || item.dictKey)
    },

    //传感器点击事件
    sensorClick(value, index) {
      this.resetRoam()
      this.resetModel()
      // this.sensorOptions.forEach(item => {
      //   if (item != value) {
      //     item.status = false
      //   }
      // })
      this.thematicOptions.forEach(item => {
        item.status = false
      })
      // this.thematicOptions[1].status = true
      this.controlOptions.forEach(item => {
        item.status = false
        sendEquipment0Msg(item.flag)
      })
      value.status = !value.status
      if (value.status) {
        sendEquipment1Msg(value.flag)
      } else sendEquipment0Msg(value.flag)
      var allTrue = true
      var allFalse = false
      this.sensorOptions.forEach(item => {
        if (!item.status) {
          allTrue = false
        }
        if (item.status) {
          allFalse = true
        }
      })
      if (allTrue) {
        this.thematicOptions[1].status = true
      }
      if (this.thematicOptions[0].status) {
        this.thematicOptions[0].status = false
        sendDistributionMsg(0)
      }
      // sendSensorMsg(value.flag)
      this.$emit('selectParkImp', allFalse, 1, this.sensorOptions)
    },
    //监控点击事件
    controlClick(value, index) {
      this.resetRoam()
      this.resetModel()
      this.thematicOptions.forEach(item => {
        item.status = false
      })
      // this.thematicOptions[2].status = true
      this.sensorOptions.forEach(item => {
        item.status = false
        sendEquipment0Msg(item.flag)
      })
      value.status = !value.status
      var allTrue = true
      var allFalse = false
      this.controlOptions.forEach(item => {
        if (!item.status) {
          allTrue = false
        }
        if (item.status) {
          allFalse = true
        }
      })
      if (value.status) {
        sendEquipment1Msg(value.flag)
      } else sendEquipment0Msg(value.flag)
      if (allTrue) {
        this.thematicOptions[2].status = true
      }
      if (this.thematicOptions[0].status) {
        this.thematicOptions[0].status = false
        sendDistributionMsg(0)
      }
      this.$emit('selectParkImp', allFalse, 2, this.controlOptions)
      // sendMonitorMsg(value.flag)
    },
    //漫游路线点击
    romaLineClick(value, index) {

      if (this.roamOptions[this.slectRoamPos].flag == '') {
        return
      }

      if (this.romaLineFlag == this.roamOptions[this.slectRoamPos].flag
      ) {
        this.romaLineFlag = ''
        this.setRoam(false)
        // 再次点击取消漫游镜头
        sendRomaMsg(0)
        this.isRoam = false
        this.$emit('romaClickImp', false)
      } else {
        this.isRoam = true
        this.setRoam(true)
        this.romaLineFlag = this.roamOptions[this.slectRoamPos].flag
        sendRomaMsg(this.roamOptions[this.slectRoamPos].flag)
        this.$emit('romaClickImp', true)
      }
    },
    //服务器模型点击监听
    netModelClick(value, index) {
      console.log('服务器模型点击监听', value)
      sendToUeMsg({
        eventType: 'move',
        lng: value.longitude,
        lat: value.latitude,
      })
      var isSame = false

      this.netModelData.forEach(item => {
        if (item.children) {
          item.children.forEach(cItem => {
            if (cItem.status) {
              if (cItem.id == value.id) {
                isSame = true
              }
              cItem.status = false
              // sendQueryModelEndMsg(cItem.id)
            }
          })
        }
      })
      if (!isSame) {
        value.status = true
        sendQueryModelMsg(value.id)
        this.showModelDetailsValue = value
        console.log("aaaa", value)
      }
      this.changeModelDetailsView(!isSame)
      // value.status = !value.status
      // if (value.children) {
      // value.children.forEach(cItem => {
      // if (value.status == true) {
      //   cItem.status = true
      // } else cItem.status = false
      //发送显示消息
      // })
      // }
    },
    ///服务器模型子级点击监听
    netModelChildClick(fValue, value, index) {
      //当前节点的父节点不是已选择的父结点，清空选择数据
      this.netModelData.forEach(item => {
        if (item.id != fValue.id) {
          item.status = false
          if (item.children) {
            item.children.forEach(cItem => {
              cItem.status = false
              //发送隐藏消息
            })
          }
        }
      })
      fValue.status = allTrue

      value.status = !value.status

      var allTrue = true
      fValue.children.forEach(item => {
        if (!item.status) {
          allTrue = false
        }
      })
      fValue.status = allTrue

    },
    toolOptionsClick9(obj) {
      if (this.toolActive9 !== obj.value) {
        this.toolActive9 = obj.value
      }
    },
    toolOptionsClick10(obj) {
      if (this.toolActive10 !== obj.value) {
        this.toolActive10 = obj.value
      }
    },
    /**
     * 页面切换事件
     * */
    monitorActiveChange(obj) {
      this.monitorActiveName = obj.value;
      this.$router.push({ name: this.monitorActiveName })
    },
    /**
     * 页面切换事件
     * */
    selectTypeChange(value) {
      this.monitorActiveName = value;
      this.$router.push({ name: this.monitorActiveName })
    },
    //重置漫游事件
    resetRoam() {
      this.roamOptions.forEach(item => {
        item.status = false
      })
      this.showRoamView = false
      if (this.isRoam) {
        this.isRoam = false
        this.romaLineFlag = ''
        sendRomaMsg(0)
        this.$emit('romaClickImp', false)
        this.setRoam(false)
        return
      }
    }
    ,
    //重置模型
    resetModel() {
      sendEditModeMsg(0)
      // this.modelOptions.forEach(item => {
      //   item.status = false
      // })
      this.systemModelOptions.forEach(item => {
        item.status = false
      })
    }
    ,
    //重置专题图
    resetThematic(bool) {
      // if (this.thematicOptions[0].status) {
      //   this.thematicOptions[0].status = false
      //   sendDistributionMsg(0)
      // }
      this.$emit('selectParkImp', false, 0)
      this.thematicOptions.forEach(item => {
        item.status = false
        if (item.childData) {
          item.childData.forEach(cItem => {
            cItem.status = false
          })
        }
      })
      return
      this.controlOptions.forEach(item => {
        item.status = false
        if (bool) {
          sendEquipment0Msg(item.flag)
        }
      })
      this.sensorOptions.forEach(item => {
        item.status = false
        if (bool) {
          sendEquipment0Msg(item.flag)
        }
      })
    },
    //日照变化
    sunshineChange(value) {
      var data = (value - 0) * 100
      sendSunShineValueMsg(data)
    },
    // 日照设置显示弹窗
    changeShowSunshineView() {
      this.showSunshineView = !this.showSunshineView
      this.$event.emit('close::marquee');
      if (this.showSunshineView) {
        sendSunShineValueMsg(this.sunshineValue * 100)
      } else sendSunShineValueMsg(this.sunshineValue * 100)
    },
    // 模型详情显示弹窗
    changeModelDetailsView(bool) {
      this.showModelDetailsView = bool
      this.$event.emit('close::marquee');
    },
    // 显示漫游
    changeShowRoma() {
      this.settingClick()
      this.showSunshineView = false
      this.showModelDetailsView = false
      this.$event.emit('show::roma');
    },
    //热力图点击事件
    heatMapClick() {
      if (!this.hotMapList.length) return this.$message.warning('当前暂无热力图数据')
      this.hotMapStatus = this.hotMapStatus == 0 ? 1 : 0;
      // let pointStr = this.hotMapList.map(item => (`${item.lat}:${item.lng}:${item.level}`)).join(',')
      // 传输热力图数据
       this.hotMapList.map(item => {
          sendToUeMsg({
            eventType: 'hotMap',
            type: 'hotMap',
            long: item.lng,
            lat: item.lat,
            status: this.hotMapStatus ? 1: 0,
          })
        });
      // sendToUeMsg({[this.hotMapStatus?'showDeviceType': 'hideDeviceType']: 'hotMap'})
    },
    sendImportModelMsg() {
      sendImportModelMsg()
    }
  }
}
</script>

<style lang="scss">
.el-input__icon {
  line-height: 15px;
}

.monitorSelectContainer .el-input {
  background: rgba(98, 183, 255, 0.2);
  box-shadow: inset 0px 0px 0.625vw 0px #62B7FF;
  border-radius: 3px;
}

.settingC_thematic_C_item_icon.un_check {
  filter: hue-rotate(200deg) brightness(0.5);
}

.settingC_thematic_C_item_icon.active {
  filter: hue-rotate(300deg);
}

.userFlex {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.monitor_nav {
  margin-left: 10px;

  .tool_item {


    .tool_name {
      width: 100%;
      height: 19px;
      padding-left: 14px;
      justify-content: start;
      align-items: start;
      font-size: 10px;

      .label {
        display: inline-block;
        width: 70px;
        text-align: center;
        color: #00E6FF;
        font-weight: 600;
      }
    }

    .tool_arr {
      display: inline-block;
      margin-left: 10px;
      width: 8px;
      height: 8px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/arr_dropdown.png");
    }

    .tool_options {
      width: 100%;

      .title {
        padding: 6px 0 6px 15px;
        width: 100%;
        height: 15px;
        font-size: 6px;
        color: #DDF8FF;
        justify-content: start;

        .tool_icon {
          width: 10px;
          height: 10px;
          border: 1px dashed #ddd;
        }
      }

      .title.active {
        color: #00E6FF;
      }
    }
  }
}


.monitorSelectContainer {

  .el-input {
    width: 150px;
    background-color: rgba(0, 26, 68, 0.6);
    cursor: pointer;
    border-radius: 0px;
    border: 0px solid #19966F;
    align-items: center;
  }

  .el-input__inner {
    width: 150px;
    height: 15px;
    font-size: 8px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #00E6FF;
    user-select: none !important;
    line-height: 15px;
    border: 0px;
    text-align: center;
    background: transparent;
  }

  .el-select__caret:before {
    content: "";
    position: absolute;
    right: 0px;
    top: 4px;
    transform: translate(-5px, 0px);
    color: #62BDEF;
  }

  .el-select-dropdown {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_parkselect_o.png");
    border: 0px solid transparent;
  }

  // 设置下拉框的字体属性及背景颜色；
  .el-select-dropdown__item {
    text-align: center;
    height: 23px;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 22px;
    font-size: 10px;
    font-family: Source Han Sans SC;
    color: #FFFFFF;
    background-color: transparent;
  }

  .el-select-dropdown__item.selected {
    color: #03E4FF;
  }

  .el-select-dropdown__item:hover {
    background: transparent !important;
    color: #03E4FF;
  }

  // 设置下拉框列表的 padding 值为：0；(即：样式调整)
  .el-select-dropdown__list {
    padding: 0;
  }

  // 设置输入框与下拉框的距离为：0; (即：样式调整)
  .el-popper[x-placement^="bottom"] {
    margin-top: 10px;
    padding-top: 10px;
  }

  // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
  .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }

  // 设置鼠标悬停在下拉框列表的悬停色；
  .el-select-dropdown__item:hover {
    background-color: #cccccc;
  }
}
</style>

<style lang="scss" scoped>
.nnone {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
}

.inlineSpan {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 16px;
  font-size: 7px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #D8E8EC;
  line-height: 16px;
}

.fitem {
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-end;
  text-align: left;
}

.title-line {
  display: flex;
  flex-direction: row;
}

.setting-tools {
  position: absolute;
  top: 40px;
  left: 40px;
  height: 390px;
  width: 530px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxSize {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.roamOptions {
  background-color: rgba(8, 32, 72, 0.3);
  display: flex;
  flex-direction: column;
  width: 160px;
  height: 200px;
  margin-top: 50px;
  margin-left: 10px;

  .title {
    padding: 6px 0 6px 15px;
    font-size: 8px;
    color: #DDF8FF;
    justify-content: start;

    .tool_icon {
      width: 10px;
      height: 10px;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .txt {
      margin: 0 6px;
    }
  }

  .title:hover {
    cursor: pointer;
  }

  .title.active {
    color: #00E6FF;
  }
}

.tp1 {
  position: absolute;
  top: 0;
  z-index: 997;
}

.tp4 {
  position: absolute;
  top: 0;
  left: 140px;
}

.tp5 {
  position: absolute;
  top: 0px;
  left: 140px;
}

.tp6 {
  position: absolute;
  left: 140px;
  top: 0px;
}

.tp7 {
  position: absolute;
  left: 270px;
  top: 0;
}

.tp8 {
  position: absolute;
  left: 270px;
  top: 0;
}

.tp9 {
  position: absolute;
  left: 275px;
  top: 0;
}

.ml5 {
  margin-left: 5px;
}

.boldT:hover {
  cursor: default !important;
}

.boldT {
  color: #2f8ee0;

  .tool_icon {
    width: 15px !important;
    height: 15px !important;

  }

}

.tp10 {
  position: absolute;
  width: 150px;
  left: 275px;
  top: 0;
  padding: 5px 0;

  .tool_icon {
    width: 13px !important;
    height: 13px !important;
  }

}

.child-txt {
  scale: .8;
}

.del-box {
  position: absolute;
  top: 0;
  left: 420px;
  width: 110px;
  background-color: rgba(8, 32, 72, .7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  z-index: 998;

  .tt {
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #D8E8EC;
    line-height: 21px;
  }

  .bb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    span {
      font-size: 10px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2F8EE0;
      line-height: 21px;
    }

    span:first-child:hover {
      cursor: pointer;
    }

    span:last-child:hover {
      cursor: pointer;
    }

  }

}

.mainContainer {
  color: #ffffff;
}

.titleContainer {
  position: absolute;
  width: 100%;
  height: 100px !important;
  background-size: 100% 100%;
  background-image: url("@/assets/icon_title.png");
  z-index: 99;

  .head_left {
    position: absolute;
    display: flex;
    align-items: start;
    justify-content: start;
    top: 10px;
    left: 57px;

    .setting_box {
      width: 19px;
      height: 19px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/tool_icon/setting_icon.png");
      cursor: pointer;
    }

    .back_box {
      margin-left: 10px;
      width: 19px;
      height: 19px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/tool_icon/back_icon.png");
      cursor: pointer;
    }

    .warn_box {
      margin-left: 10px;
      width: 19px;
      height: 19px;
      background-size: 100% 100%;
      background-image: url("@/assets/title/icon_warn.png");
      cursor: pointer;
    }

    .monitor_nav {
      margin-left: 10px;

      .tool_item {
        width: 110px;
        background-color: rgba(0, 26, 68, 0.6);
        cursor: pointer;

        .tool_name {
          width: 100%;
          height: 19px;
          padding-left: 14px;
          justify-content: start;
          align-items: start;
          font-size: 10px;

          .label {
            display: inline-block;
            width: 70px;
            text-align: center;
            color: #00E6FF;
            font-weight: 600;
          }
        }

        .tool_arr {
          display: inline-block;
          margin-left: 10px;
          width: 8px;
          height: 8px;
          background-size: 100% 100%;
          background-image: url("@/assets/monitor/air/arr_dropdown.png");
        }

        .tool_options {
          width: 100%;

          .title {
            padding: 6px 0 6px 15px;
            width: 100%;
            height: 15px;
            font-size: 6px;
            color: #DDF8FF;
            justify-content: start;

            .tool_icon {
              width: 10px;
              height: 10px;
              border: 1px dashed #ddd;
            }
          }

          .title.active {
            color: #00E6FF;
          }
        }
      }
    }

  }

  .head_right {
    position: absolute;
    right: 24px;
    top: 12px;
    font-size: 6px;
    color: #D8E8EC;

    .item {
      float: left;

      &_1 {
        min-width: 80px;
      }

      &_2 {
        min-width: 30px;
      }

      &_3 {
        min-width: 40px;
      }
    }
  }
}

.addRomaC {
  /* 父级容器 */
  width: 10px;
  height: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &_replace {
    /* 由于该元素在input下方，隐藏的input使它展现 */
    width: 10px;
    height: 10px;
    cursor: pointer;
    background-size: 100% 100%;
    background-image: url("@/assets/tj.png");
  }

  &_Btn {
    background-color: #FF5035;
    position: absolute;
    /* 将input通过定位覆盖父级元素，保证点击效果 */
    left: 0;
    cursor: pointer;
    top: 0;
    opacity: 0;
    /* 将input透明度设为0以隐藏 */
  }
}

.settingC {
  margin-top: 50px;
  margin-left: 50px;
  display: flex;
  width: 210px;
  flex-direction: column;

  &_title1 {
    margin-left: 10px;
    width: 190px;
    height: 24px;
    margin-top: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &_roam {
    width: 100%;
    background-image: url("@/assets/title/bg_settingitem.png");
    background-size: 100% 100%;
    height: 140px;

    &_C {
      margin-top: 10px;
      height: 140px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      &_name {
        margin-left: 15px;
        width: 169px;
        margin-bottom: 13px;
        font-size: 13px;
        font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
        font-weight: normal;
        color: #D8E8EC;
      }
    }
  }

  &_model {
    z-index: 99;
    margin-top: 16px;
    width: 100%;
    position: relative;
    background-image: url("@/assets/title/bg_settingitem.png");
    background-size: 100% 100%;
    height: 240px;
    display: flex;
    flex-direction: column;

    &_type {
      width: 40%;
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 7px;
      text-align: center;
      margin-bottom: 7px;
      height: 23px;
      cursor: pointer;
      line-height: 23px;
      font-size: 13px;
      font-family: PingFang-SC-Regular;
      font-weight: normal;
      color: #D8E8EC;
    }

    &_C {
      height: 130px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      &_name {
        margin-left: 15px;
        width: 169px;
        margin-bottom: 7px;
        font-size: 13px;
        font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
        font-weight: normal;
        color: #D8E8EC;
      }
    }

    &-import {
      width: 100%;
      position: absolute;
      bottom: 0px;
      height: 32px;
      font-size: 10px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      border-top: 1px solid rgba(0, 230, 255, 0.3);

      &:hover {
        opacity: 0.8;
      }
    }
  }

  &_thematic {
    width: 100%;
    margin-top: 15px;
    background-image: url("@/assets/title/bg_settingitem.png");
    background-size: 100% 100%;
    height: 220px;

    &_marginL {
      margin-left: 21px;
    }

    &_C {
      margin-top: 7px;
      height: 170px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      &_item {
        margin-top: 7px;
        display: flex;
        flex-direction: row;
        align-items: center;

        &_icon {
          margin-left: 11px;
          width: 10px;
          height: 10px;
          background-size: 100% 100%;
        }

        &_iconc {
          margin-left: 32px;
          width: 10px;
          height: 10px;
          background-size: 100% 100%;
        }

        &_name {
          margin-left: 9px;
          height: 17px;
          font-size: 13px;
          font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
          font-weight: normal;
          color: #D8E8EC;
          line-height: 17px;
        }
      }

    }
  }
}

//日照弹窗样式
.sunshineView {
  position: absolute;
  left: 275px !important;
  top: 50px !important;
  display: flex;
  flex-direction: column;
  width: 340px;
  height: 140px;
  background-size: 100% 100%;
  background-image: url("@/assets/setting/bg_sunshine.png");

  &-title {
    margin-left: 24px;
    margin-top: 6px;
    height: 25px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 21px;
  }

  &-line {
    width: 100%;
    height: 1px;
    opacity: 1;
    background: rgba(98, 183, 255, 0.2);
  }

  &-des {
    height: 22px;
    margin-left: 24px;
    margin-top: 13px;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 19px;
  }

  &-slider {
    display: flex;
    flex-direction: row;

    &-des {
      height: 40px;
      margin-left: 24px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: 40px;
    }

    &-c {
      width: 240px;
      margin-left: 10px;
    }

  }

  &-condition {
    display: flex;
    flex-direction: row;

    &-des {
      height: 22px;
      margin-left: 24px;
      font-size: 12px !important;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: 19px;
    }

    &-result {
      margin-left: 18px;
      height: 22px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 19px;
    }
  }

  &-close {
    cursor: pointer;
    width: 10px;
    position: absolute;
    right: 22px;
    top: 12px;
    height: 10px;
    background-size: 100% 100%;
    background-image: url("@/assets/setting/icon_close.png");

    &:hover {
      opacity: 0.8;
    }
  }
}

//模型详情
.modelDetailsView {
  position: absolute;
  left: 275px;
  top: 200px;
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 230px;
  background-size: 100% 100%;
  background-image: url("@/assets/setting/bg_sunshine.png");

  &-title {
    margin-left: 24px;
    margin-top: 6px;
    height: 25px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 21px;
  }

  &-desC {
    height: 190px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  &-des {
    margin-left: 24px;
    margin-top: 6px;
    font-size: 13px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  &-line {
    width: 100%;
    height: 1px;
    opacity: 1;
    background: rgba(98, 183, 255, 0.2);
  }

  &-close {
    cursor: pointer;
    width: 10px;
    position: absolute;
    right: 22px;
    top: 12px;
    height: 10px;
    background-size: 100% 100%;
    background-image: url("@/assets/setting/icon_close.png");

    &:hover {
      opacity: 0.8;
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }

  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }

  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }


  .titleContainer {
    height: calHeight_2k(100px) !important;

  }

  .monitorSelectContainer {

    .el-input {
      width: calHeight_2k(150px);
    }

    .el-input__inner {
      width: calHeight_2k(150px);
      height: calHeight_2k(15px);
      line-height: calHeight_2k(15px);
    }

    .el-select__caret:before {
      top: calHeight_2k(4px);
      transform: translate(calHeight_2k(-5px), 0px);
    }

    .el-select-dropdown {}

    // 设置下拉框的字体属性及背景颜色；
    .el-select-dropdown__item {
      height: calHeight_2k(23px);
      margin-left: calHeight_2k(6px);
      margin-right: calHeight_2k(6px);
      margin-bottom: calHeight_2k(10px);
      line-height: calHeight_2k(22px);
    }

    .el-select-dropdown__item.selected {}

    .el-select-dropdown__item:hover {}

    // 设置下拉框列表的 padding 值为：0；(即：样式调整)
    .el-select-dropdown__list {}

    // 设置输入框与下拉框的距离为：0; (即：样式调整)
    .el-popper[x-placement^="bottom"] {
      margin-top: calHeight_2k(10px);
      padding-top: calHeight_2k(10px);
    }

    // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
    .el-popper .popper__arrow,
    .el-popper .popper__arrow::after {}

    // 设置鼠标悬停在下拉框列表的悬停色；
    .el-select-dropdown__item:hover {}
  }

  .roamOptions {
    height: calHeight_2k(200px);
  }

  .settingC {

    &_title1 {
      height: calHeight_2k(24px);

      span {
        height: calHeight_2k(24px);
        line-height: calHeight_2k(24px);
      }
    }

    &_roam {
      height: calHeight_2k(140px);

      &_C {
        height: calHeight_2k(140px);

        &_name {}
      }
    }

    &_model {
      height: calHeight_2k(240px);

      &_type {
        height: calHeight_2k(23px);
        line-height: calHeight_2k(23px);
      }

      &_C {
        height: calHeight_2k(130px);

        &_name {}
      }

      &-import {
        height: calHeight_2k(32px);
        font-size: calHeight_2k(10px);
        line-height: calHeight_2k(32px);
      }
    }

    &_thematic {
      height: calHeight_2k(220px);

      &_marginL {}

      &_C {
        height: calHeight_2k(170px);

        &_item {

          &_icon {
            width: calHeight_2k(10px);
            height: calHeight_2k(10px);
          }

          &_iconc {
            width: calHeight_2k(10px);
            height: calHeight_2k(10px);
          }

          &_name {
            height: calHeight_2k(17px);
            line-height: calHeight_2k(17px);
          }
        }

      }
    }
  }

  .sunshineView {
    left: calHeight_2k(275px);
    top: calHeight_2k(50px);
    width: calHeight_2k(340px);
    height: calHeight_2k(140px);

    &-title {
      margin-left: calHeight_2k(24px);
      margin-top: calHeight_2k(6px);
      height: calHeight_2k(25px);
      line-height: calHeight_2k(21px);
    }

    &-des {
      height: calHeight_2k(22px);
      margin-left: calHeight_2k(24px);
      margin-top: calHeight_2k(13px);
      line-height: calHeight_2k(19px);
    }

    &-slider {

      &-des {
        height: calHeight_2k(40px);
        margin-left: calHeight_2k(24px);
        line-height: calHeight_2k(40px);
      }

      &-c {
        width: calHeight_2k(240px);
        margin-left: calHeight_2k(10px);
      }

    }

    &-condition {

      &-des {
        height: calHeight_2k(22px);
        margin-left: calHeight_2k(24px);
        font-size: calHeight_2k(12px);
        line-height: calHeight_2k(19px);
      }

      &-result {
        margin-left: calHeight_2k(18px);
        height: calHeight_2k(22px);
        line-height: calHeight_2k(19px);
      }
    }

    &-close {
      width: calHeight_2k(10px);
      right: calHeight_2k(22px);
      top: calHeight_2k(12px);
      height: calHeight_2k(10px);

    }
  }

  .modelDetailsView {
    position: absolute;
    left: calHeight_2k(275px);
    top: calHeight_2k(200px);
    width: calHeight_2k(360px);
    height: calHeight_2k(230px);

    &-title {
      margin-left: calHeight_2k(24px);
      margin-top: calHeight_2k(6px);
      height: calHeight_2k(25px);
      font-size: calHeight_2k(14px);
      line-height: calHeight_2k(21px);
    }

    &-desC {
      height: calHeight_2k(190px);
    }

    &-des {
      margin-left: calHeight_2k(24px);
      margin-top: calHeight_2k(6px);
      font-size: calHeight_2k(12px);
    }

    &-line {}

    &-close {
      width: calHeight_2k(10px);
      right: calHeight_2k(22px);
      top: calHeight_2k(12px);
      height: calHeight_2k(10px);

      &:hover {}
    }
  }
}
</style>


<!--编码器-->
<!--  IDV-->
<!--  DVR-->
<!--  IPC-->
<!--  全景云台-->
<!--  NVS-->
<!--  MCS-->
<!--  MDVR-->
<!--  NVR-->
<!--  MPT-->
<!--  EVS-->
<!--  IVSS-->
<!--  微中心服务器-->
<!--  VTA-->
<!--  热成像-->
<!--  IVS-->
<!--报警主机-->
<!--  报警主机-->
<!--道闸设备-->
<!--  出入口道闸-->
<!--  停车场道闸-->
<!--  视频挡车器-->
<!--  RFID道闸-->
<!--卡口-->
<!--  卡口设备-->
<!--LED设备-->
<!--  通用-条屏-->
<!--门禁设备-->
<!--  人像门禁-->
<!--  普通门禁-->
<!--  二代RFID设备-->
<!--  集中控制器-->
<!--  人证核验终端-->
<!--  人像闸机-->
<!--雷达设备-->
<!--  雷达设备-->
<!--显控设备-->
<!--  解码器(NVD)-->
<!--  大屏设备(VMP)-->
<!--  矩阵设备(DSCON)-->
<!--访客机设备-->
<!--  ASV2001-->
<!--  ASV2111-->
<!--智能设备(Intelligent Device)-->
<!--  DP管理服务器-->
<!--运维虚拟设备-->
<!--  运维虚拟设备-->
